<template>
<div>
  <el-dialog title="编辑美食" width="40%" :destroy-on-close="true" :visible.sync="updateVisible" :before-close="handleClose">
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                学校:
                </span>
            <div style="width:100%">
              <el-form-item prop="schoolId" style="margin-bottom:0">
                <el-select filterable @change="changeSchool" size="mini" v-model="form.schoolId" placeholder="请选择">
                  <el-option v-for="(item,index) in school" :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                餐厅:
                </span>
            <div style="width:100%">
              <el-form-item prop="restId" style="margin-bottom:0">
                <el-select multiple filterable size="mini" v-model="form.restId" placeholder="请选择">
                  <el-option v-for="(item,index) in restaurant" :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                类型:
                </span>
            <div style="width:100%">
              <el-form-item prop="restId" style="margin-bottom:0">
                <el-select filterable size="mini" v-model="form.typeId" placeholder="请选择">
                  <el-option v-for="(item,index) in type" :key="index"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                名称:
                </span>
            <div style="width:100%">
              <el-form-item prop="name" style="margin-bottom:0">
                  <el-input v-model="form.name" size="mini" placeholder="请输入名称" autocomplete="off"></el-input>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                窗口:
                </span>
            <div style="width:100%">
              <el-form-item prop="address" style="margin-bottom:0">
                  <el-input v-model="form.address" size="mini" placeholder="请输入窗口" autocomplete="off"></el-input>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                营业时间:
                </span>
            <div style="width:100%">
              <el-form-item prop="open" style="margin-bottom:0">
                  <el-input v-model="form.open" size="mini" placeholder="请输入营业时间" autocomplete="off"></el-input>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                评分:
                </span>
            <div style="width:100%">
              <el-form-item prop="star" style="margin-bottom:0">
                <el-rate v-model="form.star"></el-rate>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                图片:
                </span>
            <div style="width:100%">
              <el-form-item prop="image" style="margin-bottom:0">
                <el-upload
                :file-list="fileList"
                ref="upload"
                :action="uploadImageUrl()"
                accept="image/*"
                :multiple="false"
                :limit="10"
                :before-upload="beforeAvatorUpload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-exceed="handleExceed"
                :on-success="handleAvatorSuccess"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <span class="search-title">
                内容:
                </span>
            <el-form-item prop="content" style="margin-bottom:0">
              <quill-editor ref="myQuillEditor" :options="editorOption"
              v-model="form.content"/>
              <el-upload class="Quill-uploader" :show-file-list="false" accept="image/*" v-show="0" ref="updateUpload" :multiple="false" :action="uploadImageUrl()"
                  :on-success="handleQillSuccess">
              </el-upload>
            </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      <el-button size="mini" @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
  import {mixin} from "../../../minix";
  import {getFoodTypeList,editFoodList,getFoodListById,getFoodRestaurantList,getFoodSchoolList,getFoodRestaurantBySchool} from '../../../api/api'
  export default {
    mixins: [mixin],
    data() {
      return{
        type: [],
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        formLabelWidth: '80px',
        form: {
          restId: "",
          schoolId: "",
          name: "",
          address: "",
          open: "",
          image: "",
          content: "",
          star: 0,
        },
        editorOption: {
          placeholder: "请输入文字内容",
          modules: { 
            toolbar: {
                container: [
                    ["bold", "italic", "underline", "strike"], 
                    ["blockquote", "code-block"], 
                    [{ header: 1 }, { header: 2 }], 
                    [{ list: "ordered" }, { list: "bullet" }], 
                    [{ script: "sub" }, { script: "super" }], 
                    [{ indent: "-1" }, { indent: "+1" }], 
                    [{ direction: "rtl" }], 
                    [{ size: ["small", false, "large", "huge"] }], 
                    [{ header: [1, 2, 3, 4, 5, 6, false] }], 
                    [{ color: [] }, { background: [] }], 
                    [{ font: [] }], [{ align: [] }], 
                    ["clean"], ["image"]
                ],
                handlers: {
                    'image': function ( value ) {
                        if ( value ) {
                            // 触发上传插件
                            document.querySelector('.Quill-uploader .el-upload__input').click()
                        } else {
                            this.quill.format( 'image', false );
                        }
                    }
                }
            },
            syntax: { 
                highlight: text => { 
                    return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方 
                }
            }
          }
        },
        school: [],
        restaurant: [],
        rules: {
          schoolId: [
            { required: true, message: '请选择学校', trigger: 'blur' },
          ],
          restId: [
            { required: true, message: '请选择餐厅', trigger: 'blur' },
          ],
          typeId: [
            { required: true, message: '请选择类型', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入窗口', trigger: 'blur' },
          ],
          open: [
            { required: true, message: '请输入营业时间', trigger: 'blur' },
          ],
          image: [
            { required: true, message: '请上传图片', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
          ],
          star: [
            { required: true, message: '请选择评分', trigger: 'blur' },
          ],
        },
      }
    },
    props: ['updateVisible','updateId'],
    methods: {
      getFoodTypeList() {
        getFoodTypeList().then(res => {
          if (res.code == 1000) {
            this.type = res.data
          }
        })
      },
      changeSchool(val) {
        getFoodRestaurantBySchool({school: val}).then(res => {
          if (res.code == 1000) {
            this.restaurant = res.data
          }
        })
      },
      handleQillSuccess(res){
          let _this = this;
          if(res.code == 1000){
              _this.$notify({
                  title: '上传成功',
                  type: 'success'
              });
              let imgurl = this.$store.state.configure.HOST + res.message
              let quill = this.$refs.myQuillEditor.quill
              let position = quill.getSelection().index
              quill.insertEmbed(position, 'image', imgurl)
              quill.setSelection(position + 1)
          }else{
              _this.$notify({
                  title: '上传失败',
                  type: 'error'
              });
          }
      },
      handleAvatorSuccess(res) {
        let _this = this;
        if(res.code == 1000){
            _this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.fileList.push({url:this.$store.state.configure.HOST + res.message})
        }else{
          _this.$notify.error({
            title: '错误',
            message: res.message
          });
        }
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      getFoodSchoolList() {
          getFoodSchoolList().then(res => {
              if (res.code == 1000) {
                  this.school = res.data
              }
          })
      },
      submit() {
        var file = []
        for(let i = 0;i < this.fileList.length;i++) {
            file.push(this.fileList[i].url)
        }
        if (file.length > 0) {
            this.form.image = file.join(",")
        }
        this.form.restId = this.form.restId.join(",")
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            editFoodList(this.form).then(res => {
              if(res.code == 1000) {
                this.$notify.success({
                  title: '成功',
                  message: "保存成功"
                });
                this.handleClose();
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                });
              }
            })
          } else {
            return false;
          }
        });
      },
      handleClose() {
        this.fileList = []
        this.$emit("updateFalse")
      },
     
    },
    created() {
     
    },
    mounted() {
      this.getFoodTypeList()
    },
    watch: {
      updateId(newVal) {
        if(newVal) {
          getFoodListById({id:newVal}).then(res => {
            if(res.code == 1000) {
              this.form = res.data
              this.form.state = res.data.state + ""
              var img = this.form.image.split(",")
              for(let i = 0;i<img.length;i++) {
                  var param = {
                      url: img[i]
                  }
                  this.fileList.push(param)
              }
              this.form.restId = this.form.restId.split(",")
              this.getFoodSchoolList()
              this.changeSchool(this.form.schoolId)
            } else {
              this.$notify.error({
                title: '错误',
                message: res.message
              });
            }
          })
        }
        
      }
    }
 }
</script>

<style lang=scss scoped>
  .el-col {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 12px
  }
  .search-title {
      font-family: '黑体';
      float: right;
      white-space: nowrap;
      font-size: 14px;
      width: 84px;
      text-align: right;
  }
  .el-tree {
      border: 1px solid #BDC1C9;
  }
</style>